<template>
  <div class="me">
    <div class="tip_title">我的关注</div>
    <div class="flex_start">
      <!-- <van-tag @click="goInfo" plain size="20" v-for="item in attentionArr" :key="item">{{item}}</van-tag> -->
       <div  @click="goInfo" class="Focus" v-for="item in attentionArr" :key="item.id">
          <img :src='item.img'/>
          <div>{{item.name}}</div>
        </div>
    </div>
    <div class="tip_title">当前热门</div>
    <div class="flex_start">
      <div  @click="goInfo" class="Focus"  v-for="item in hotArr" :key="item.id">
        <img :src='item.img'/>
        <div>{{item.name}}</div>
      </div>
      <!-- <van-tag @click="goInfo" plain size="20" v-for="item in hotArr" :key="item">{{item}}</van-tag> -->
    </div>
  </div>
</template>
<script>
import { Icon, Button, Tag } from 'vant'
export default {
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Tag.name]: Tag
  },
  data() {
    return {
      attentionArr:[{
          id:'0',
          name:'风水圈',
          img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559547168436&di=6f23464a07a88a4778b4254196d9dc25&imgtype=0&src=http%3A%2F%2Fbbsfile.co188.com%2Fforum%2Fmonth_0902%2F20090219_ac0425e67bda844a10225lruBonYzFyd.jpg'
        },
        {
          id:'1',
          name:'学区房',
          img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559546149788&di=c33ffbb646475d0dab4e72629788074e&imgtype=0&src=http%3A%2F%2Fimg01.tooopen.com%2Fdowns%2Fimages%2F2010%2F8%2F11%2Fsy_20100811113134095929.jpg'
        },
        {
          id:'2',
          name:'二手房',
          img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559545242172&di=6407c6df3982a181d394484c92df0300&imgtype=0&src=http%3A%2F%2Fimg.soufun.com%2Fnews%2F2014_08%2F28%2Fhouse%2F1409223488278_000.jpg'
        },
        {
          id:'3',
          name:'新盘',
          img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559545192530&di=e8ee2c87c4ed99764c6f86bca6460b8f&imgtype=0&src=http%3A%2F%2Fpic2.to8to.com%2Fcase%2F1703%2F15%2F20170315_f6f77d031c94f61b41b86r6cu0l1h1us_sp.jpg'
        }],
        hotArr:[
          {
            id:'001',
            name:'家装',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559547236145&di=bd3b8f847a6ed4f0086c8bb1ee93ef98&imgtype=0&src=http%3A%2F%2Fimg01.jituwang.com%2F160712%2F257621-160G209324398.jpg"
          },
          {
            id:'002',
            name:'学区房',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559546149788&di=c33ffbb646475d0dab4e72629788074e&imgtype=0&src=http%3A%2F%2Fimg01.tooopen.com%2Fdowns%2Fimages%2F2010%2F8%2F11%2Fsy_20100811113134095929.jpg"
          },
          {
            id:'003',
            name:'房市风险',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559546327763&di=3b9e35601e44c2f217a4519202b034c8&imgtype=0&src=http%3A%2F%2Fxmwb.xinmin.cn%2Fresfile%2F2019-06-01%2FA19%2Fp1_b.jpg"
          },
          {
            id:'004',
            name:'风水',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559547168436&di=6f23464a07a88a4778b4254196d9dc25&imgtype=0&src=http%3A%2F%2Fbbsfile.co188.com%2Fforum%2Fmonth_0902%2F20090219_ac0425e67bda844a10225lruBonYzFyd.jpg"
          },
          {
            id:'005',
            name:'海外房市',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559546368969&di=9003ac36dc2021e99af4a09ba055ff0a&imgtype=0&src=http%3A%2F%2Fimg1.gtimg.com%2Fwuxi_house%2Fpics%2Fhv1%2F170%2F31%2F98%2F6380525.jpg"
          },
          {
            id:'006',
            name:'房产说',
            img:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3144129524,2657699083&fm=26&gp=0.jpg"
          },
          {
            id:'007',
            name:'贷款',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559546565608&di=6515bc0d1b9b811cda515831df7cfec8&imgtype=0&src=http%3A%2F%2Fpic.nipic.com%2F2007-10-14%2F20071014124943628_2.jpg"
          },
          {
            id:'008',
            name:'房产税',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559546410904&di=c95ddbab34c9429b1d6bf99772dc479a&imgtype=jpg&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170425%2Fe636060f71bf4108914beb39cf252de6_th.jpg"
          },
          {
            id:'009',
            name:'开发商',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559546660220&di=c425e5e8a56ec24dee27cb6d365764df&imgtype=0&src=http%3A%2F%2Fimg4.cache.netease.com%2Fcnews%2F2014%2F1%2F16%2F2014011616271092e8e.jpg"
          },
          {
            id:'010',
            name:'楼盘',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559546463048&di=df84e6dc126ebd0a771840a4501caaeb&imgtype=0&src=http%3A%2F%2Fimg.soufun.com%2Fnews%2F2014_08%2F28%2Fhouse%2F1409223488278_000.jpg"
          },
          {
            id:'011',
            name:'公寓',
            img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559546463049&di=598123fa80c06312d3abffc111f6e0b8&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F10%2F08%2F473fbd436224ce7fcf2b4e76c976c38d.jpg%2521%2Ffwfh%2F804x804%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue"
          },
        ],
    }
  },
  methods: {
    goInfo() {
      this.$router.push({
        path: '/topic'
      })
    }
  }
}
</script>
<style lang="less" scoped>
.me {
  background-color: #fff;
  padding: 10px 10px;
  box-sizing: border-box;
  .header {
    margin-top: 5px;
    margin-bottom: 5px;

    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
    .text {
      margin-left: 5px;
      display: flex;
      flex-direction: column;
      .text_name {
        font-size: 14px;
        display: inline-block;
      }
      .text_content {
        font-size: 12px;
        color: #e5e5e5;
      }
    }
  }
  .massage {
    border-bottom: 1px solid #e5e5e5;
    padding: 10px 0;
    box-sizing: border-box;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .Focus {
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 10px 10px;
    box-sizing: border-box;
    img{
     width: 40px;
     height: 40px;
     margin-left: 5px;
     
   }
   div{
     font-size: 13px;
     text-align: center;
   }
  }
  .van-tag {
    font-size: 13px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .title {
    .min_title {
      font-size: 14px;
    }
    .min_font {
      font-size: 12px;
    }
  }
  .panel-list {
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    padding: 10px 10px;
    box-sizing: border-box;
    .card_header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .card_footer {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      font-size: 14px;
      padding: 10px 0;
      box-sizing: border-box;
      border-top: 1px solid #e5e5e5;
      margin-top: 5px;
    }
  }
  .footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 20px;
  }
}
.flex_space {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.flex_start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.flex_around {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.tip_title {
  font-size: 14px;
}
.size {
  font-size: 12px;
  text-align: center;
}
.min_size {
  font-size: 12px;
  color: #e5e5e5;
  margin-top: 5px;
}
a {
  color: #000;
}
</style>
